<template>
	<div class="my-goods-list">
	  	<MyTable :arr="list">
            <template #title>
									<th>#</th>
									<th>商品名称</th>
									<th>价格</th>
									<th>标签</th>
									<th>操作</th>
						</template>
							
            <template #content="scope">
                <td>{{ scope.obj.id }}</td>
								<td>{{ scope.obj.goods_name }}</td>
								<td>{{ scope.obj.goods_price }}</td>
								<td>
									<div>
										<!-- 输入框 -->
										<!-- v-if  else互斥 -->
										<input 
										  v-if="scope.obj.inputVisible"
											v-model.trim="scope.obj.inputValue"
											v-focus
											@blur="scope.obj.inputVisible = false"
											@keyup.esc="scope.obj.inputValue = ''"
											@keyup.enter="addFn(scope.obj)"
											style="width: 150px" 
											class="tag-input form-control" 
											type="text" 
										 />


										<button 
											v-else
											@click="scope.obj.inputVisible = true"							    
											class="btn btn-primary btn-sm add-tag">
											+Tag
										</button>
									</div>

                  <span class="badge bg-warning text-dark" v-for="(item, index) in scope.obj.tags" :key="index">
										   {{ item }}
									</span>
								
								</td>
								<td><button class="btn btn-danger btn-sm" @click="delFn(scope.obj.id)">删除</button></td>
						</template>

			</MyTable>
	</div>
</template>

<script>
	// 接口：GTE  https://www.escook.cn/api/goods


	import MyTable from '../components/MyTable.vue'

  // 引入第三方包
	import axios from 'axios'
	import 'bootstrap/dist/css/bootstrap.css'


	export default {
		data() {
			return {
				list: [],
			};
		},

	  async	created () {
			const {data: res} = await axios.get('https://www.escook.cn/api/goods') 
			// console.log(res);
       this.list = res.data
		},

		methods: {
			//todo 删除功能
			delFn(id){
         this.list = this.list.filter(item => item.id !== id)
			},

			//todo  新增标签功能
			addFn(obj){
          if(obj.inputValue === ''){
             return alert('请输入内容')
					}

          obj.tags.push(obj.inputValue)

					// 清空
					obj.inputValue = ''
			}
		},

		//todo  自定义指令
		directives: {
         focus: {
					  inserted(el){
                el.focus()
						}
				 }
		},

		components: {
			  MyTable
		}
	};
</script>

<style>
</style>
